<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../../../static/css/boots.css" media="all"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>知识学院</title>
    <link href="../../../static/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet"/>
    {% comment %} <link rel="stylesheet" type="text/css" href="../../../static/css/dateRange.css" />{% endcomment %}
    <link href="../../../static/css/set-meal.css" type="text/css" media="screen" rel="stylesheet"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../../static/js/dateRange.js"></script>
    <script type="text/javascript" src="../../../static/js/monthPicker.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.ui.sortable.js"></script>
    <script type="text/javascript" src="../../../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../../../static/js/xadmin.main.js"></script>
    <script type="text/javascript" src="../../../static/js/xadmin.responsive.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.ui.effect.js"></script>
    <script type="text/javascript" src="../../../static/js/xadmin.plugin.themes.js"></script>
    <script type="text/javascript" src="../../../static/js/xadmin.page.dashboard.js"></script>
    <script type="text/javascript" src="../../../static/js/xadmin.plugin.portal.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.freetile.min.js"></script>
    <script type="text/javascript" src="../../../static/js/base64.js"></script>


</head>
<style type="text/css">
    body.dashboard {
        background-color: #FBFBFB;
        /*font-family: "-apple-system-font,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif";*/
        font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
    }

    ul, li {
        list-style: none;
    }

    a {
        color: #606266;
        display: block;
        text-decoration: none !important;
    }

    a:hover, a:focus {
        /*color: #428bca;*/
        color: #606266;
    }

    hr {
        margin: 20px 0px 10px;
    }

    input {
        outline：none !important;
        padding: 0;
    }

    input:hover, input:focus {
        outline：none !important;
        border: none;
    }

    .padding-left05 {
        margin-left: 10px;
    }

    .mian-width {
        width: 1300px;
        margin: 0 auto;
    }

    .fs12 {
        font-size: 12px;
    }

    .fs14 {
        font-size: 14px;
    }

    .fs16 {
        font-size: 16px;
    }

    .fw700 {
        font-weight: 700;
    }

    .c3 {
        color: #606266;
    }

    .navbar-brand {
        padding: 15px 0;
    }

    .navbar {
        margin-bottom: 0;
    }

    .navbar-collapse {
        padding-left: 0px;
        padding-right: 0px;
    }

    .btn-login {
        border: 1px solid #fff;
        margin-right: 18px;
        padding: 5px 0 !important;
        text-align: center;
        color: #fff !important;
        width: 80px;
        font-size: 14px;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border-color: #dcdfe6;
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        border-radius: 4px;
        margin-top: 14px;
    }

    .btn-login:hover {
        background-color: #fff !important;
        color: #525cdc !important;
    }

    .btn-register:hover {
        background-color: #757de3 !important;
        color: #fff !important;
    }

    .btn-register {
        background-color: #525cdc;
        border-color: #525cdc;
    }

    .auth-body-warp {
        display: none;
    }

    .auth-body {
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
    }

    .body-middle {
        width: 100%;
        margin: 0 auto;
    }

    .body-middle form {
        display: flex;
        text-align: center;
        align-items: center;
    }

    .top-img {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .panel-wrapper {
        width: 100%;
    }

    .panel {
        background-color: #fff;
        width: 440px;
        max-width: 100%;
        border: 1px solid #eee;
        border-radius: 10px;
        z-index: 100;
        padding: 30px 60px;
        margin: 20px auto;
    }

    .body-content {
        width: 1300px;
        margin: 75px auto 0;
    }

    .grabble {
        width: 100%;
    }

    .grabble-left {
        width: 80%;
        float: left;
        position: relative;
    }

    .grabble .grabble-input {
        width: 100%;
        height: 40px;
        padding: 0;
        text-indent: 1em;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
    }

    .grabble-rigth {
        width: 18%;
        float: left;
        margin-left: 17px;
    }

    .grabble-button {
        display: inline-block;
        height: 40px;
        width: 100%;
        color: #fff;
        padding: 0;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        border-radius: 5px;
    }

    .show-module {
        width: 100%;
        margin-left: -10px;
        position: relative;
    }

    .show-module li.outer-li {
        width: 206px;
        float: left;
        font-size: 14px;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
        position: relative;
    }

    .show-module li.outer-li a {
        height: 40px;
        border: 1px solid #dcdfe6;
        line-height: 40px;
        border-radius: 5px;
    }

    .select-a {
        text-align: left;
        text-indent: 0.5em;
        background: url(../../../static/images/cxjt.png) no-repeat scroll 88% center transparent;
        background-size: 15px 8px;
        color: #606266;
    }

    .select-ul {
        position: absolute;
        top: 35px;
        width: 100%;
        margin: 10px auto;
        padding: 0;
        background-color: #fff;
        max-height: 300px;
        border: 1px solid #f5f7fa;
        border-radius: 5px;
        -moz-box-shadow: 2px 2px 13px #919191;
        -webkit-box-shadow: 2px 2px 13px #919191;
        box-shadow: 2px 2px 13px #919191;
        overflow-y: auto;
        z-index: 100;
        display: none;
        color: #606266;
    }

    .select-ul li {
        height: 40px;
        line-height: 40px;
    }

    .select-ul li:hover {
        background-color: #f5f7fa;
    }

    .content-middle-ul {
        width: 100%;
        margin-top: 20px;
    }

    .margin-top0 {
        margin-top: 0;
    }

    .li-titel {
        font-weight: 600;
        font-size: 20px;
    }

    .li-heat {
        text-align: left;
    }

    .close-img {
        float: right;
        width: 30px;
        height: 30px;
        margin-right: -45px;
        margin-top: -10px;
    }

    .user-information {
        overflow: hidden;
        margin: 10px auto 0;
    }

    .user-information img {
        border-radius: 100%;
    }

    .user-color {
        color: #fff;
        text-align: center;
    }

    .grabble-select {
        width: 85px;
        position: absolute;
        top: 0px;
        min-height: 40px;
        left: 0px;
        background: url(../../../static/images/cxjt.png) no-repeat scroll 88% center transparent;
        background-size: 15px 8px;
        padding: 0;
        border-right: 1px solid #dcdfe6;
    }

    .grabble-select .outer-li {
        position: relative;
        min-height: 40px;
    }

    .grabble-select .outer-li .select-a {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
    }

    .grabble-select .outer-li .select-ul {
        text-align: center;
        z-index: 110;
    }

    .head-content {
        color: #606266;
        margin: 10px auto;
    }

    .new-head-content {
        color: #606266;
        margin: 10px auto 15px;
    }

    .single-page {
        position: absolute;
        width: 315px;
        padding: 15px 15px 0 15px;
        margin: 10px 10px 10px 0;
        border: 1px solid #d4d4d4;
        background-color: #fff;
        border-radius: 5px;
    }

    .mian-img-div {
        width: 100%;
        text-align: center;
        border: 1px solid #ccc;
        margin: 0px auto;
        border-radius: 5px;
        -moz-box-shadow: 2px 2px 15px #c1c1c1;
        -webkit-box-shadow: 2px 2px 15px #c1c1c1;
        box-shadow: 2px 2px 15px #c1c1c1;
    }

    .mian-img {
        width: 96%;
        margin: 5px auto;
    }

    img.head-logo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0px auto;
    }

    .head-content span {
        display: inline-block;
        height: 20px;
        margin-right: 10px;
        font-size: 12px;
    }

    span.span-right {
        cursor: pointer;
        text-align: right;
    }

    .heat-img {
        height: 15px;
        margin-top: -1px;
    }

    .clear {
        clear: both
    }

    a.select-a:hover, a.select-a:focus {
        color: #333;
    }

    .collect-button {
        text-align: right;
    }

    .a-button {
        display: inline-block;
        width: 65px;
        height: 25px;
        border: 1px solid #d8d8d8;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        color: #606266;
        border-radius: 5px;
        margin-right: 10px;
    }

    .outer-li-alone input {
        width: 100%;
        height: 99%;
        border: none;
        opacity: 0;
    }

    .label-explain {
        width: 100%;
    }

    .label-explain-title {
        width: 50px;
        float: left;
        margin-top: 10px;
    }

    .label-explain-content {
        width: 90%;
        float: left;
    }

    .label-explain-content .span {
        color: #7c6fab;
        background-color: #e2e7ff;
        border: 1px solid #d8d8d8;
        padding: 1px 10px;
        border-radius: 50px;
        display: inline-block;
        margin-top: 10px;
        margin-left: 5px;
    }

    .label-explain-content span img {
        margin-left: 5px;
        cursor: pointer;
    }

    .calendar-bg {
        background: url(../../../static/images/calendar.png) no-repeat 23px center;
    }
</style>
<body>
<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="mian-width">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index"><img src="../../../static/images/icon.png"
                                                       style="margin-right: 5px"/></a>
        </div>
        <div class="navbar-collapse collapse" id="login_ul">
            <ul class="nav navbar-nav pull-right" id="loginUl" style="display: block;">
                <li class="dropdown g-theme">
                    <a class="btn-login" id="btnLogin">
                        登录
                    </a>

                </li>
                <li class="dropdown g-theme">
                    <a class="btn-login btn-register" id="btnRegister" style="margin-right: 10px;">
                        注册
                    </a>

                </li>

            </ul>

            <ul class="nav navbar-nav pull-right" style="display:none;position: relative;margin-right: 50px;"
                id="userList">
                <li class="dropdown user-information" style="cursor:pointer;">
                    <img src="../../../static/images/head.png" style="width: 30px;height: 30px;" id="show_list"/>
                    <div class="user-color" id="company_name"></div>
                </li>
                <ul style="display:none;position: absolute;padding: 0;background-color: #fff;max-height: 300px;border: 1px solid #f5f7fa;border-radius: 5px;-moz-box-shadow:2px 2px 13px #919191; -webkit-box-shadow:2px 2px 13px #919191; box-shadow:2px 2px 13px #919191;overflow-y: auto;z-index: 100;color: #606266;width: 150px;text-align: center;left:-46px;top:65px;"
                    id="buttonList">
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="user_page">
                            <img src="../../../static/images/YHXX.png"/>
                            用户信息
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="collect_page">
                            <img src="../../../static/images/sc.png"/>
                            收藏列表
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;cursor:pointer;" id="out">
                        <a style="display: block;">
                            <img src="../../../static/images/TCDL.png"/>
                            退出登录
                        </a>
                    </li>
                </ul>

            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/product_introduction" class="btn-login set-meal">
                        产品介绍
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/purchase_page" target="_blank" class="btn-login set-meal">
                        价格套餐
                    </a>

                </li>
            </ul>

            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/show_ad_school" target="_blank" class="btn-login set-meal">
                        知识学院
                    </a>

                </li>
            </ul>
        </div>
    </div>
</div>

<!--列表开始-->
<div id="wrap">
    <div class="main container" style="padding-left: 0; padding-right: 0;">
        <div class="content">
            <div class="sec-panel archive-list">
                <div class="sec-panel-head">
                    <h1>{{ labelTitle }}</h1>
                </div>
                <ul class="article-list">
                    {% comment %}<li class="item">
                        <div class="item-img">
                            <a href="" target="_blank">
                                <img class="j-lazy" src="../../../static/images/item-img.jpg" alt="年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？" style="display: inline;"> </a>
                            <a class="item-category" href="" target="_blank">产品运营</a>
                        </div>
                        <div class="item-content">
                            <h2 class="item-title">
                                <a href="" title="" target="_blank">
                                    年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？</a>
                            </h2>
                            <div class="item-excerpt">
                                <p>岁末年初，各大APP都开始陆续推出用户年度数据盘点报告，你的朋友圈有被各大APP的年终盘点H5刷屏吗？网易云音乐年度听歌报告、支付宝年度账单、微信《2018 微信数据...</p>
                            </div>
                            <div class="item-meta">
                                <span class="item-meta-li date">15个小时前</span>

                                <span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> 3.21K</span> </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-img">
                            <a href="" target="_blank">
                                <img class="j-lazy" src="../../../static/images/item-img.jpg" alt="年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？" style="display: inline;"> </a>
                            <a class="item-category" href="" target="_blank">产品运营</a>
                        </div>
                        <div class="item-content">
                            <h2 class="item-title">
                                <a href="" title="" target="_blank">
                                    年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？</a>
                            </h2>
                            <div class="item-excerpt">
                                <p>岁末年初，各大APP都开始陆续推出用户年度数据盘点报告，你的朋友圈有被各大APP的年终盘点H5刷屏吗？网易云音乐年度听歌报告、支付宝年度账单、微信《2018 微信数据...</p>
                            </div>
                            <div class="item-meta">
                                <span class="item-meta-li date">15个小时前</span>

                                <span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> 3.21K</span> </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-img">
                            <a href="" target="_blank">
                                <img class="j-lazy" src="../../../static/images/item-img.jpg" alt="年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？" style="display: inline;"> </a>
                            <a class="item-category" href="" target="_blank">产品运营</a>
                        </div>
                        <div class="item-content">
                            <h2 class="item-title">
                                <a href="" title="" target="_blank">
                                    年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？</a>
                            </h2>
                            <div class="item-excerpt">
                                <p>岁末年初，各大APP都开始陆续推出用户年度数据盘点报告，你的朋友圈有被各大APP的年终盘点H5刷屏吗？网易云音乐年度听歌报告、支付宝年度账单、微信《2018 微信数据...</p>
                            </div>
                            <div class="item-meta">
                                <span class="item-meta-li date">15个小时前</span>

                                <span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> 3.21K</span> </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-img">
                            <a href="" target="_blank">
                                <img class="j-lazy" src="../../../static/images/item-img.jpg" alt="年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？" style="display: inline;"> </a>
                            <a class="item-category" href="" target="_blank">产品运营</a>
                        </div>
                        <div class="item-content">
                            <h2 class="item-title">
                                <a href="" title="" target="_blank">
                                    年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？</a>
                            </h2>
                            <div class="item-excerpt">
                                <p>岁末年初，各大APP都开始陆续推出用户年度数据盘点报告，你的朋友圈有被各大APP的年终盘点H5刷屏吗？网易云音乐年度听歌报告、支付宝年度账单、微信《2018 微信数据...</p>
                            </div>
                            <div class="item-meta">
                                <span class="item-meta-li date">15个小时前</span>

                                <span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> 3.21K</span> </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-img">
                            <a href="" target="_blank">
                                <img class="j-lazy" src="../../../static/images/item-img.jpg" alt="年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？" style="display: inline;"> </a>
                            <a class="item-category" href="" target="_blank">产品运营</a>
                        </div>
                        <div class="item-content">
                            <h2 class="item-title">
                                <a href="" title="" target="_blank">
                                    年终H5那么多，支付宝网易云凭什么刷爆你的朋友圈？</a>
                            </h2>
                            <div class="item-excerpt">
                                <p>岁末年初，各大APP都开始陆续推出用户年度数据盘点报告，你的朋友圈有被各大APP的年终盘点H5刷屏吗？网易云音乐年度听歌报告、支付宝年度账单、微信《2018 微信数据...</p>
                            </div>
                            <div class="item-meta">
                                <span class="item-meta-li date">15个小时前</span>

                                <span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> 3.21K</span> </div>
                        </div>
                    </li>
{% endcomment %}
                </ul>
                <div style="text-align: center;">
                    <div class="ui-page" id="ui-page"></div>
                    {% comment %}<ul class="pagination pagination-lg">
                        <li>
                            <a href="#">&laquo;</a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">&raquo;</a>
                        </li>
                    </ul>{% endcomment %}
                </div>

            </div>
        </div>
        <aside class="sidebar">
            <div style="background: #fff;overflow: hidden;">
                <div id="post-thumb-7" class="widget widget_post_thumb">
                    <h3 class="widget-title"><span>最新文章</span></h3>
                    <ul class="newAtricleUl">
                        {% comment %}<li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li><li class="item">
                        <div class="item-img">
                            <a href="" title="ＡPP如何实现产品的冷启动？">
                                <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                        </div>
                        <div class="item-content">
                            <p class="item-title">
                                <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                            </p>

                        </div>
                    </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>
                        <li class="item">
                            <div class="item-img">
                                <a href="" title="ＡPP如何实现产品的冷启动？">
                                    <img class="j-lazy" src="../../../static/images/item-img-02.jpg" data-original="../../../static/images/item-img-02.jpg" width="480" height="300" alt="ＡPP如何实现产品的冷启动？"> </a>
                            </div>
                            <div class="item-content">
                                <p class="item-title">
                                    <a href="" title="ＡPP如何实现产品的冷启动？">ＡPP如何实现产品的冷启动？</a>
                                </p>

                            </div>
                        </li>{% endcomment %}

                    </ul>

                    <a class="sidebar-r-img" href="/">
                        <img src="../../../static/images/aside_ad.jpg"/>
                    </a>
                </div>
            </div>

            <div style="background: #fff;overflow: hidden;margin-top: 20px;">
                <div id="tag_cloud-4" class="widget widget_tag_cloud">
                    <h3 class="widget-title"><span>热门标签</span></h3>
                    <div class="tagcloud">
                        {% comment %}<a href="" class="tag-cloud-link tag-link-66 tag-link-position-1" aria-label="APP推广">APP推广</a>
                        <a href="" class="tag-cloud-link tag-link-66 tag-link-position-1" aria-label="APP推广">APP推广</a>
                        <a href="" class="tag-cloud-link tag-link-66 tag-link-position-1" aria-label="APP推广">APP推广</a>
                        <a href="" class="tag-cloud-link tag-link-66 tag-link-position-1" aria-label="APP推广">APP推广</a>
                        <a href="" class="tag-cloud-link tag-link-66 tag-link-position-1" aria-label="APP推广">APP推广</a>{% endcomment %}
                    </div>
                </div>
            </div>

        </aside>
    </div>
</div>
<footer class="footer">

</footer>

<style>
    .footer {
        padding-bottom: 35px;
    }
</style>
<script type='text/javascript'>
    /* <![CDATA[ */
    var _wpcom_js = {
        "slide_speed": "5000"
    };
    /* ]]> */
</script>

<script type="text/javascript" src="../../../static/js/article-item.js"></script>

<script type='text/javascript'>
    var labelId = {{ labelID }};

    /* 获取所有标签 */
    function getAllLabel() {
        var get_label_url = '/showAllLabel';
        $.ajax({
            url: get_label_url,
            type: 'GET',
            async: true,
            success: function (response) {
                var json_data = JSON.parse(response);
                if (json_data.hasOwnProperty("labelData")) {
                    var labelData = json_data.labelData;
                    var html = []
                    labelData.forEach(function (v) {
                        html += "<a href=\"/showArticleByTab/" + v.id + "/\"  class=\"tag-cloud-link tag-link-66 tag-link-position-1\" aria-label=" + v.ad_school_label + ">" + v.ad_school_label + "</a>";
                    });
                    $('div.tagcloud').html(html);
                }
            },
            error: function () {

            }
        });
    };

    /*获取最新的8篇文章*/
    function getNewArticle() {
        var getNewArticleUrl = '/getNewArticle';
        $.ajax({
            url: getNewArticleUrl,
            type: 'GET',
            async: true,
            success: function (response) {
                if (response.hasOwnProperty("newArticle")) {
                    var newArticle_data = response.newArticle;
                    var html = []
                    newArticle_data.forEach(function (article) {
                        html += '<li class=\'item\'>\n' +
                            '<div class=\'item-img\'>\n' +
                            '<a href=\'javascript:void(0);\' title=' + article.ad_school_title + '>\n' +
                            '<img class=\'j-lazy\' src=' + article.ad_school_image + ' data-original=' + article.ad_school_image + ' width=\'480\' height=\'300\' alt=' + article.ad_school_title + '> </a>\n' +
                            '</div>\n' +
                            '<div class=\'item-content\'>\n' +
                            '<p class=\'item-title\'>\n' +
                            '<a href="/showArticle/' + article.id + '/" title=' + article.ad_school_title + ' target=\'_blank\'>' + article.ad_school_title + '</a>\n' +
                            '</p>\n' +
                            {% comment %} '<p class=\'item-date\'>'+article.ad_school_create_time+'</p>\n' +{% endcomment %}
                            '</div>\n' +
                            '</li>';

                    });
                    $("ul.newAtricleUl").html(html);
                }
            },
            error: function () {

            }

        });
    };
    {% comment %}function goToSearchLabel(label_id, label_title){
        labelId = label_id;
        initArticleList();
{#        $("div.sec-panel-head").html("<h1>"+label_title+"</h1>");#}

    };{% endcomment %}
    $(function () {
        getNewArticle();
        getAllLabel();
        initArticleList();
    });
</script>

{% comment %}自定义分页条{% endcomment %}

<script>
    var limitNum = 15;
    $.fn.extend({
        paging: function (option) {
            var obj = $(this);
            var defaults = {
                pageSize: limitNum, //可视页码数量
                totalPage: 10, //数据总页码
            };
            var settings = $.extend(defaults, option || {});  //初始化
            var totalPage = settings.totalPage;
            var pageSize = settings.pageSize;
            init();

            function light(obj) {    //点击页码高亮样式，当前页码
                obj.addClass("current").siblings().removeClass("current");
            }

            function getCurrentIndex() {
                return obj.find(".current").index();
            }

            function getCurrentPage() {
                return parseInt(obj.find("span").eq(getCurrentIndex()).text());
            }

            function resetPage(start) {
                var objPage = obj.find("span");
                for (var i = 2; i < pageSize + 2; i++) {
                    $(objPage[i]).text(start++);
                }
            }

            function showHome(ishome) {
                var homeObj = obj.find(".home");
                if (ishome) {
                    homeObj.show();
                } else {
                    homeObj.hide();
                }

            }

            function showEnd(isend) {
                var endObj = obj.find(".end");
                if (isend) {
                    endObj.show();
                } else {
                    endObj.hide();
                }

            }

            function makePage(start, isHome, isEnd) {  //生成页码

                var index = 0;
                var html = '';
                var endPage = start + pageSize - 1;
                if (totalPage <= pageSize) {
                    endPage = totalPage;
                }
                html = '<span class="home" id="home">首页</span><span id="pre" class="home"><</span>';
                for (var i = start; i <= endPage; i++) {
                    html += '<span class="page" id="uipage-nav' + i + '">' + i + "</span>";
                }
                html += '<span id="next" class="end">></span><span  class="end" id="end">末页</span>';
                obj.html(html);
                if (!isHome || start == 1) {
                    showHome(false);
                }
                if (!isEnd) {
                    showEnd(false);
                }
            }

            function refreshPage(start, nextPage) {   //刷新页码
                var end = start + pageSize - 1;
                if (start <= 1) {
                    start = 1;
                    resetPage(start);
                    showHome(false);
                    showEnd(true);
                    light($("#uipage-nav" + nextPage));
                } else if (start > 1 && start + pageSize < totalPage) {
                    resetPage(start);
                    showHome(true);
                    showEnd(true);
                    light($("#uipage-nav" + pageSize));
                } else if (end > totalPage) {
                    start = totalPage - pageSize + 1;
                    showEnd(false);
                    showHome(true);
                    resetPage(start);
                    var endPage = parseInt($("#uipage-nav" + pageSize).text()); //末页页数
                    var showPageIndex = pageSize - (endPage - nextPage);
                    light($('#uipage-nav' + showPageIndex));
                } else if (end == totalPage) {
                    resetPage(start);
                    showEnd(false);
                    showHome(true);
                    light($('#uipage-nav1'));
                } else {
                    resetPage(start);
                    showEnd(true);
                    showHome(true);
                    light($('#uipage-nav1'));
                }

            }

            function init() {   //初始化页码
                if (totalPage <= 1) {
                    makePage(1, false, false)
                    return false
                } else if (totalPage <= pageSize) {
                    makePage(1, false, false)
                } else {
                    makePage(1, false, true);
                }
                light(obj.find("span").eq(2));
            }

            obj.find(".page").click(function () {
                var _this = $(this);
                var showPage = _this.text();
                light(_this);
                sendAjax(showPage, limitNum, labelId);
            });
            obj.find("#next").click(function () {
                var currentIndex = getCurrentIndex();
                var currentPage = getCurrentPage();
                var showPageIndex = currentIndex + 1;
                var nextPage = currentPage + 1;
                if (currentIndex == pageSize + 1) {
                    refreshPage(currentPage + 1, nextPage);
                } else {
                    light(obj.find("span").eq(showPageIndex));
                }
                sendAjax(nextPage, limitNum, labelId);
            });
            obj.find("#pre").click(function () {
                var currentIndex = getCurrentIndex();
                var currentPage = getCurrentPage();
                var showPageIndex = currentIndex - 1;
                var nextPage = currentPage - 1;
                if (currentIndex == 2) {
                    refreshPage(currentPage - pageSize, nextPage);
                } else {
                    light(obj.find("span").eq(showPageIndex));
                }
                sendAjax(nextPage, limitNum, labelId);
            });
            obj.find("#home").click(function () {
                refreshPage(1);
                showEnd(true);
                showHome(false);
                light(obj.find("span").eq(2));
                sendAjax(1, limitNum, labelId);
            });
            obj.find("#end").click(function () {
                refreshPage(totalPage - pageSize + 1);
                showEnd(false);
                showHome(true);
                light(obj.find("span").eq(pageSize + 1));
                sendAjax(totalPage, limitNum, labelId);
            });
        }
    });
</script>
<script>
    /* 动态写入数据 */
    function view(data) {
        var html = [];
        for (var i = 0; i < data.length; i++) {
            html += '<li class="item">\n' +
                '\t\t\t\t\t\t\t\t<div class="item-img">\n' +
                '\t\t\t\t\t\t\t\t\t<a href="javascript:void(0);" target="_blank">\n' +
                '\t\t\t\t\t\t\t\t\t\t<img class="j-lazy" src="' + data[i].ad_school_image + '" alt="' + data[i].ad_school_title + '" style="display: inline;"> </a>\n' +
                '<a class="item-category" href="/showArticleByTab/' + data[i].ad_school_label_id + '/">' + data[i].ad_school_label + '</a>\n' +
                '\t\t\t\t\t\t\t\t</div>\n' +
                '\t\t\t\t\t\t\t\t<div class="item-content">\n' +
                '\t\t\t\t\t\t\t\t\t<h2 class="item-title">\n' +
                '            <a href="/showArticle/' + data[i].id + '/" title="" target="_blank">\n' +
                '                                ' + data[i].ad_school_title + '</a>\n' +
                '        </h2>\n' +
                '\t\t\t\t\t\t\t\t\t<div class="item-excerpt">\n' +
                '\t\t\t\t\t\t\t\t\t\t' + data[i].ad_school_article + '\n' +
                '\t\t\t\t\t\t\t\t\t</div>\n' +
                '\t\t\t\t\t\t\t\t\t<div class="item-meta">\n' +
                '\t\t\t\t\t\t\t\t\t\t<span class="item-meta-li date">' + data[i].ad_school_count_time + '</span>\n' +
                '\n' +
                '\t\t\t\t\t\t\t\t\t\t<span class="item-meta-li views" title="阅读数"><i class=""><img src="../../../static/images/views-ico.png"/></i> ' + data[i].ad_school_count + '</span> </div>\n' +
                '\t\t\t\t\t\t\t\t</div>\n' +
                '\t\t\t\t\t\t\t</li>';
        }
        $('ul.article-list').html(html);
    }

    /* ajax 请求更新数据 */
    function sendAjax(page, size, labelId) {
        var url = '/get_ad_school';
        $.ajax({
            url: url,
            type: 'GET',
            data: {offset: page, limit: size, labelSearch: labelId},
            {#cache:false,#}
            dataType: 'json',
            success: function (data) {
                if (data) {
                    view(data.rows)
                }
            }
        });
    }
</script>
<script>
    function initArticleList() {
        /* 初始化页面 */
        var initTotalPageNum = $.ajax({
            url: '/get_ad_school',
            data: {offset: 1, limit: limitNum, labelSearch: labelId},
            type: 'GET',
            async: false,
            {#cache: false,#}
            dataType: 'json',
            success: function (data) {
                return data;
            },
            error: function () {
                return null;
            }
        });
        if (initTotalPageNum != null) {
            if (initTotalPageNum.hasOwnProperty("responseJSON")) {
                if (initTotalPageNum.responseJSON.hasOwnProperty("total")) {
                    var totalPages = Math.ceil(initTotalPageNum.responseJSON.total / limitNum);
                    $("#ui-page").paging({pageSize: limitNum, totalPage: totalPages});
                }
                if (initTotalPageNum.responseJSON.hasOwnProperty("rows")) {
                    view(initTotalPageNum.responseJSON.rows);
                }
            }
        } else {
            $('ul.article-list').empty();
            $('div.ui-page').empty();
        }
    }
</script>
<style>
    /* 分页 css */
    .ui-page {
        margin: 0 auto;
        margin-top: 25px;
        width: 415px;
        text-align: center;
        font-size: 14px;
        color: #666666;
    }

    .ui-page span {
        margin-right: 3px;
        display: inline-block;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 40px;
        background: #e5e5e5;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
    }

    .ui-page span:last-child {
        margin-right: 0;
    }

    .ui-page span.current, .ui-page span:hover {
        background: #bcbcbc;
        color: #ffffff;
    }

    .ui-page #home {
        width: 60px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .ui-page #end {
        width: 60px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ui-page #end, .ui-page #home {
        font-weight: bolder;
    }

    .ui-page .home-page {
        display: none;
    }

    /* 分页css 结束 */
    /* 页面样式 start */
    #list-wrap {
        margin: 0 auto;
        width: 20%;
        line-height: 20px;
    }

    .list {
        padding: 15px 0;
        border-bottom: 2px solid #ededed;
    }
</style>

<script type="text/javascript" src="../../../static/js/top-common.js"></script>

<style type="text/css">
    .logo-img-parent {
        text-align: center;
        margin: 14px auto;
    }

    .logo-img-parent img {
        width: 250px;
        height: 40px;
    }

    .mian-bg-wf {
        width: 480px;
        background-color: #fff;
        margin: 0px auto 0;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .mian-bg-wf-close {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

    .mian-bg-wf-top {
        width: 275px;
        height: 46px;
        border-radius: 20px;
        border: 1px solid #999;
        margin: 55px auto 30px;
        text-align: center;
    }

    .tacitly-style {
        color: #999;
        display: inline-block;
        width: 50%;
        float: left;
        line-height: 45px;
        cursor: pointer;
        font-size: 14px;
    }

    .pitch-bg {
        background-color: #999;
        color: #fff;
    }

    .left-top-radius20 {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .right-top-radius20 {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .company-name {
        width: 20px;
        height: 18px;
        background: url(../../../static/images/company_name.png);
    }

    .person-head-img {
        width: 19px;
        height: 18px;
        background: url(../../../static/images/head_img.png);
    }

    .person-phone {
        width: 14px;
        height: 20px;
        background: url(../../../static/images/phone.png);
    }

    .person-lock {
        width: 17px;
        height: 19px;
        background: url(../../../static/images/lock.png);
    }

    .login-index-form {
        width: 350px;
        margin: 0 auto;
    }

    .login-index-fd {
        position: relative;
    }

    .login-index-fd i {
        position: absolute;
        z-index: 100;
        top: 13px;
        left: 10px;
    }

    .login-index-fd-input {
        width: 350px;
        height: 45px;
        border-radius: 5px;
        border: 1px solid #dedede;
        text-indent: 38px;
        color: #4e4e4e;
        outline: none;
    }

    .login-index-fd-span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        width: 100%;
        text-align: left;
        opacity: 0;
        color: #ff7878;
    }

    .login-index-fd-input-code {
        position: absolute;
        height: 43px;
        width: 90px;
        font-size: 14px;
        text-align: center;
        right: 10px;
        top: 1px;
        cursor: pointer;
        border: none;
        color: #5065cd;
    }

    .login-button {
        height: 45px;
        background-color: #5065cd;
        color: #fff;
        line-height: 45px;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        margin: 0px auto 45px;
    }

    .policy-div {
        margin: 20px auto 45px;
        color: #666;
        font-size: 14px;
    }

    .policy-div a {
        display: inline-block;
        color: #5065cd;
    }
</style>
<div class="auth-body-warp">
    <div class="auth-body">
        <div class="body-middle">
            <div class="logo-img-parent">
                <img src="../../../static/images/logo.png"/>
            </div>

            <div class="mian-bg-wf">
                <img src="../../../static/images/GB.png" class="mian-bg-wf-close" id="close_btn"/>
                <div id="jsRegister" class="mian-bg-wf-top">
                    <div class="tacitly-style left-top-radius20 pitch-bg" id="change_login">登录</div>
                    <div class="tacitly-style right-top-radius20" id="change_register">注册</div>
                </div>

                <form class="login-index-form" id="login-index" style="display: block;">
                    <div class="login-index-fd">
                        <i class="person-phone"></i>
                        <input type="text" placeholder="手机号码" class="focus-input-border login-index-fd-input"
                               id="personagePhone"/>
                        <sapn class="login-index-fd-span">输入手机号码</sapn>
                    </div>
                    <div class="login-index-fd">
                        <i class="person-lock"></i>
                        <input type="text" placeholder="验证码" class="focus-input-border login-index-fd-input"
                               id="personageCode"/>
                        <sapn class="login-index-fd-span">输入验证码</sapn>
                        <input type="text" value="获取验证码" readonly="" id="gainCode" class="login-index-fd-input-code"/>
                    </div>
                    <div class="login-button" id="loginButton">登录</div>
                </form>

                <form style="display: none;" id="register-index" class="login-index-form">
                    <div class="login-index-fd">
                        <i class="company-name"></i>
                        <input type="text" placeholder="公司名称" class="focus-input-border login-index-fd-input"
                               id="registerCompanyName"/>
                        <sapn class="login-index-fd-span">输入公司名称</sapn>
                    </div>
                    <div class="login-index-fd">
                        <i class="person-head-img"></i>
                        <input type="text" placeholder="姓名" class="focus-input-border login-index-fd-input"
                               id="registerName"/>
                        <sapn class="login-index-fd-span">输入姓名</sapn>
                    </div>
                    <div class="login-index-fd">
                        <i class="person-phone"></i>
                        <input type="text" placeholder="手机号码" class="focus-input-border login-index-fd-input"
                               id="registerPhone"/>
                        <sapn class="login-index-fd-span">输入手机号码</sapn>
                    </div>
                    <div class="login-index-fd">
                        <i class="person-lock"></i>
                        <input type="text" placeholder="验证码" class="focus-input-border login-index-fd-input"
                               id="registerCode"/>
                        <sapn class="login-index-fd-span" id="input_code">输入验证码</sapn>
                        <input type="text" value="获取验证码" class="login-index-fd-input-code" readonly=""
                               id="register_gainCode"/>
                    </div>
                    <div class="login-button" id="registerButton">注册</div>
                    <div class="policy-div">注册即表示您同意 <a href="/agreement_page" target="_blank">服务条款</a> 和 <a
                            href="/privacy" target="_blank">隐私政策</a>。
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
</body>

</html>